<template>
  <div>
    <div>
      <nav>
        <input type="text" name id="search" placeholder="    人人都是创业达人">
        <span class="mui-icon mui-icon-search"></span>
      </nav>
      <mt-swipe :auto="4000">
        <mt-swipe-item v-for="item in lunbotuList" :key="item.id">
          <img :src="item.images.medium" alt>
        </mt-swipe-item>
      </mt-swipe>

      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-phone"></span>
            <span class="mui-media-body">全部课程</span>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-media-body">课堂教案</span>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-info"></span>
            <span class="mui-media-body">会员精品</span>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-more"></span>
            <span class="mui-media-body">分销中心</span>
          </a>
        </li>
      </ul>
    </div>
    <div>
      <div class="text">
            <span class="guide">课程导读</span>
            <span class="more">更多</span>
      </div>
      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-4">
          <a href="#">
            <mt-button type="primary">primary</mt-button>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-4">
          <a href="#">
            <mt-button type="primary">primary</mt-button>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-4">
          <a href="#">
            <mt-button type="primary">primary</mt-button>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-4">
          <a href="#">
            <mt-button type="primary">primary</mt-button>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-4">
          <a href="#">
            <mt-button type="primary">primary</mt-button>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-4">
          <a href="#">
            <mt-button type="primary">primary</mt-button>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";

export default {
  data() {
    return {
      lunbotuList: []
    };
  },
  created() {
    this.getLunbotu();
  },
  methods: {
    getLunbotu() {
      //获取轮播图数据的方法
      this.$http
        .jsonp("https://api.douban.com//v2/movie/top250")
        .then(result => {
          // console.log(result.body);
          if (result.status === 200) {
            this.lunbotuList = result.data.subjects;
            console.log(this.lunbotuList);
            // Toast("获取成功");
          } else {
            Toast("获取失败");
          }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.mint-swipe {
  height: 200px;
}
img {
  height: 100%;
  width: 100%;
}
nav {
  width: 100%;
  position: absolute;
  top: 40;
  z-index: 999;
}
nav .mui-icon-search {
  position: absolute;
  top: -1px;
  color: black;
  font-size: 20px;
  right: 15px;
  top: 8px;
}
input {
  left: 20px;
  background-color: transparent;
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
  font-size: 5px;
}
.text{
    width: 100%;
    .guide{
        padding-left: 10px;
    }
    .more{
        padding-left: 220px;
    }
}
</style>
